<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>029-多列布局</title>
		<style>
			.outer {
				width: 1300px;
				margin: 0 auto;

				/* 直接指定列数【推荐】 */
				column-count: 5;

				/* 指定每一列的宽度，会自动计算列数【不推荐】 */
				/* column-width: 300px; */

				/* 列之间的间距 */
				column-gap: 20px;

				/* 每一列边框宽度 */
				column-rule: 2px dotted #ff0000;
			}

			h1 {
				column-span: all; /* 让标题跨越所有列 */
				text-align: center;
				font-size: 50px;
			}

			img {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<h1>《多列布局》</h1>
			<p>
				【开始】 Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias autem, culpa in quos non magni et
				commodi itaque maiores cumque voluptatibus ab, facilis recusandae voluptatum fugiat voluptas repudiandae.
				Explicabo a porro nihil est aspernatur exercitationem illo quod sit atque id saepe fuga minima vero enim nisi
				placeat eos, officia nesciunt illum fugiat! Et quo iste consequatur ipsum perspiciatis dignissimos, excepturi
				dolore facere velit quasi laudantium. Beatae deleniti numquam ratione nam dicta quisquam laborum officiis error
				expedita eos eaque recusandae delectus provident esse, quaerat voluptatibus enim? Modi perspiciatis similique
				autem quibusdam? Aspernatur quia nisi quos molestiae rem autem impedit. Repellendus, tempora. 【结束】
			</p>
			<img src="./images/start.jpg" alt="" />
			<p>
				【开始】 Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi quibusdam, autem esse tempora similique
				placeat, mollitia illo sed saepe quo eius voluptatem, quia dignissimos totam ipsum nisi sapiente quis fuga ad
				debitis incidunt temporibus ut. Nulla expedita, veniam optio saepe perferendis nobis labore cumque sequi quas
				eos animi sapiente quasi? 【结束】
			</p>
			<p>
				【开始】 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores fuga, minima eligendi enim cupiditate
				error deserunt aliquid, voluptas inventore, hic expedita adipisci iusto! Consectetur, praesentium harum?
				Aspernatur facilis, est omnis ut tenetur rem quam accusantium officiis illo! Veniam nisi eaque libero, cum
				soluta consectetur odio explicabo labore magni provident iusto sapiente atque non neque quasi aut voluptate iure
				corrupti doloremque tempora pariatur illo. Quasi dolor molestias voluptatum quod quae minima ducimus? Totam,
				iure molestias, sit sapiente atque accusamus omnis, dolores fuga qui repellendus sint dolorum. Dolorum impedit
				sed eos quae corporis molestiae unde quasi, ullam iusto debitis. Nisi recusandae vero consequuntur, culpa
				incidunt itaque labore architecto porro aut possimus nostrum sint delectus reiciendis, fugiat sequi assumenda
				odio et sed fugit cupiditate cum non, accusantium laboriosam? Nihil, aperiam eaque. Nostrum cum dignissimos
				nesciunt expedita repellat sint eveniet animi praesentium consequatur a aut voluptates rerum maxime dolore
				labore, sit doloremque delectus soluta sapiente aliquid quaerat, ullam tenetur! Eos sequi libero, dolores, earum
				distinctio assumenda nemo atque unde, quod ea fugit iure quaerat culpa ut. Inventore voluptatem natus
				repudiandae obcaecati cum sit maxime id quo sequi deserunt deleniti fugit illo nesciunt quas exercitationem
				totam, sapiente voluptatibus? In laboriosam blanditiis iusto itaque quisquam quia? 【结束】
			</p>
			<p>
				【开始】 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla, molestiae? Magnam eveniet explicabo
				suscipit, quo fuga tempore error consequatur facilis architecto ut esse, officia dolor, quidem consequuntur
				expedita! Tempore vero recusandae cum qui nostrum atque excepturi vel sequi quae. Dolor aut nostrum nihil facere
				quaerat cumque optio enim eligendi harum, debitis quibusdam error qui beatae iste perspiciatis at, consectetur
				incidunt ullam illo. Dolores, impedit, asperiores dignissimos vero ipsum ipsam distinctio officia expedita
				maiores nobis repellat? Quia obcaecati nobis fugiat asperiores placeat officiis sint nesciunt in eius soluta,
				quidem quasi nulla vero ex eum suscipit provident aperiam amet temporibus magni at. Id fuga ratione eius,
				laudantium repellendus omnis rerum soluta vitae facere numquam aliquam tenetur asperiores reprehenderit nihil!
				Pariatur quod soluta eveniet quae molestiae reiciendis ea, eos qui incidunt cum iste cupiditate modi ab eaque
				recusandae nemo minima deserunt dolore fugit nisi! Deserunt aliquid hic in, doloribus doloremque voluptatem ipsa
				sunt pariatur culpa animi adipisci ipsum dolorum fugit laborum facere officiis omnis inventore ex quae! Minus
				odio officia quas officiis cum similique placeat, natus, qui mollitia ipsum repellendus quisquam architecto
				cumque, ratione ut nihil. Officiis, dolores ullam! Expedita architecto voluptatem velit tempore earum itaque
				fuga, dolorum voluptates cumque rem dolores sed dignissimos accusantium nihil cum, hic harum autem. Quisquam,
				voluptatum perferendis blanditiis id at unde voluptates, numquam, repellat iste velit nobis labore temporibus
				mollitia explicabo impedit perspiciatis ea nisi magni expedita quod excepturi rerum maxime dolor. Blanditiis
				sapiente sequi quaerat laboriosam perferendis assumenda atque unde incidunt architecto iusto, consequuntur
				magni, dolorum molestiae sunt ad nulla. Saepe architecto doloribus quis esse blanditiis laborum error voluptas
				autem voluptatem ad facilis quae exercitationem, debitis minus molestias! Iusto quisquam odio laborum eum facere
				architecto dignissimos necessitatibus vero eaque dolorum et porro tempore nemo harum eos quidem, voluptatum aut
				quia beatae obcaecati incidunt? Repellat assumenda odit quisquam quod inventore ea? Labore ab ex ducimus
				recusandae dolor, voluptates, quas eum veniam mollitia consequuntur dicta delectus facilis aliquam quo quibusdam
				non! Ex eum facilis in quod sunt mollitia tempore, earum veritatis voluptate magnam porro dolores, dolorem nemo?
				Ducimus doloribus fuga distinctio impedit dolore harum sunt vel mollitia pariatur. Eius, ratione. Est tempore
				ratione unde sit earum perferendis ducimus deleniti consectetur corrupti ex soluta illo, eveniet voluptates,
				amet tempora porro blanditiis minima, aliquam aspernatur sint illum inventore ullam autem quae. Fuga quis
				expedita, voluptas deserunt esse rem quas vitae maiores, quasi temporibus facere dignissimos sequi error, alias
				possimus pariatur aut nam ipsum eaque ullam eveniet? Fugit dolorum natus deserunt accusamus accusantium nam ut
				fuga minima enim, repellendus ipsa, sunt voluptatum quam, eveniet cum aliquid odio tenetur porro voluptatem
				neque laudantium! Accusamus eos ad consequuntur numquam quos, nulla mollitia earum quam nam similique magnam
				praesentium quae beatae atque explicabo id minus optio dolore culpa aperiam quisquam sit autem doloribus.
				Doloribus porro ea voluptatibus earum. Nostrum nisi amet quia odit blanditiis eaque voluptatibus ullam dolore.
				Eum officia laborum ratione inventore consectetur beatae mollitia molestias ea rerum temporibus debitis ipsum,
				modi eveniet voluptate saepe tempore cum odit. Amet ipsam aperiam odio explicabo? 【结束】
			</p>
			<p>
				【开始】 Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil quae consequatur possimus blanditiis in
				illo, aut aperiam? Fugiat animi, repudiandae sit nobis dicta assumenda reiciendis. Tempora asperiores dolor
				accusantium magni error provident obcaecati veniam, possimus quibusdam, magnam laboriosam praesentium maxime
				autem accusamus a cum, amet quod quisquam numquam nemo sequi nisi! Consectetur dolorum consequatur odio, quas
				reprehenderit velit iste voluptatem quae beatae dolores, eveniet repellendus animi, sapiente tempore ad!
				Voluptatum, accusamus quod? In fuga et alias vero maiores, ex praesentium totam excepturi obcaecati rerum quas
				iure, fugit beatae ipsa? Ipsam, officiis odit esse fugiat harum id voluptatibus numquam accusantium expedita
				mollitia quia amet laborum perspiciatis quod neque ratione recusandae, nesciunt eius. Tenetur praesentium in
				itaque fugiat, quae ea fuga voluptas rem amet inventore enim dicta veniam ipsa voluptatem velit id. Est maxime,
				voluptate fugit natus sit animi debitis omnis iusto minima esse necessitatibus facilis provident at ipsa quo
				officiis alias repudiandae exercitationem praesentium? Tempora totam vel dignissimos rerum ea quas voluptas nam
				similique nisi quibusdam, sequi ipsa delectus maiores esse doloremque architecto repellendus temporibus dolore
				sed laborum! Dicta quibusdam praesentium odio nostrum vitae temporibus. Explicabo quam repudiandae quos
				repellendus consequuntur? 【结束】
			</p>
			<p>
				【开始】 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis iste voluptates, magni accusantium
				officia praesentium pariatur provident minus rerum suscipit possimus, at illum perferendis aspernatur ex
				voluptate exercitationem, cupiditate a. At nam eveniet nulla facere, ut repellendus accusantium, doloremque odio
				error soluta voluptatum. Neque perspiciatis saepe reiciendis consequuntur quidem praesentium quibusdam ratione,
				officia enim provident molestias fuga nobis dolorum optio similique, deserunt atque rerum, excepturi velit
				sequi. Odio voluptatem dolores veritatis! Nemo ab deleniti dolorem maxime iste expedita? A beatae quasi rem quo,
				illum ad sed provident consectetur aliquam nobis, quae molestiae, fuga accusantium doloribus reprehenderit
				tempora ipsam voluptas commodi? Ipsum sit ea distinctio quis animi voluptatibus, sint a aperiam? Provident culpa
				eligendi officiis ipsum facere similique sapiente aliquam placeat earum quo, maiores sequi error fugiat
				accusamus, laudantium accusantium ullam quos natus dolore, voluptatem amet commodi itaque nisi dicta. Quia
				architecto molestiae a esse obcaecati reprehenderit, hic id aut, veniam amet rerum illum eum est sequi
				repudiandae, tempore voluptate cupiditate explicabo modi placeat. Culpa ratione aliquam at. Laudantium explicabo
				labore, at eum nobis fugiat, suscipit tenetur dolorum quae sapiente odit inventore nisi aliquam rerum iusto,
				consequatur velit impedit veniam eligendi necessitatibus sed reprehenderit aperiam laborum assumenda! Neque
				molestiae eum earum praesentium consectetur similique. Modi ipsam fugiat accusantium totam recusandae, explicabo
				tenetur culpa harum optio sapiente assumenda, atque nisi quod. Numquam eos maxime nisi deleniti, harum placeat
				tenetur tempore quaerat ea sed asperiores iste dolore minus perferendis deserunt magni corrupti nobis expedita
				libero pariatur nulla. Ut laborum cum quidem voluptatum perferendis. Maiores sit corporis, sunt dolorem saepe,
				ab fuga magni ut veniam quia tempore doloremque, laboriosam sed deserunt nulla quod nisi illum eius atque
				delectus blanditiis. Harum similique hic facere dolor vero reprehenderit molestias fugit, sed, culpa omnis
				aliquam provident sint deserunt ratione fuga at! Voluptatibus itaque assumenda minima suscipit odit velit
				voluptates deserunt cum quasi necessitatibus sed optio, unde provident exercitationem adipisci placeat beatae
				eius quod. Ipsum, officiis! Sit incidunt similique earum atque facere non, consequuntur omnis? Nostrum expedita
				perspiciatis at accusantium consectetur fugit suscipit eos rerum recusandae voluptates deserunt ipsam cum vitae
				voluptatibus beatae ducimus corporis cumque, nulla odio enim non ipsum praesentium quos. Hic blanditiis numquam
				accusantium similique tempore doloremque temporibus molestias dolor exercitationem, magni, labore voluptatibus
				cupiditate ipsum, magnam odit voluptatum aliquid nisi! Asperiores veniam, cumque dolores omnis voluptatem
				nostrum? Quisquam voluptas iusto ipsum, soluta vitae aspernatur culpa ex neque temporibus perspiciatis autem
				iure eaque, numquam nemo? 【结束】
			</p>
			<p>
				【开始】 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati ad quis minus dolorum quo, est
				temporibus modi velit earum laudantium sed saepe error asperiores dolores laboriosam amet eaque! Dolorum nobis
				aut delectus itaque nihil architecto voluptas facere repellat quam. Nobis fugiat laborum dicta dolorem itaque
				mollitia architecto? Harum consequuntur quod ratione neque. Maxime vero voluptatum modi neque nesciunt
				recusandae! Obcaecati dolor eum iure voluptas illo velit. Esse at ullam beatae sequi minus totam nostrum quos
				explicabo maiores soluta. Harum, nihil? 【结束】
			</p>
		</div>
	</body>
</html>
